<template>
	<view class="page">
		<view class="input_area">
			<u--form :model="model" ref="form" errorType="message" labelWidth="auto"
				:labelStyle="{ padding: '5px 30px 5px 0',fontWeight : '600', fontSize : '15px' }">
				<u-form-item prop="name" label="您的姓名" :borderBottom="true">
					<u--input v-model="model.name" border="none" clearable placeholder="请输入您的姓名"
						placeholderClass="pricePlaceholder">
					</u--input>
				</u-form-item>
				<u-form-item prop="tel" label="电话号码">
					<u--input v-model="model.tel" type="number" border="none" clearable placeholder="请输入电话号码"
						maxlength="11" placeholderClass="pricePlaceholder">
					</u--input>
				</u-form-item>
			</u--form>
		</view>
	</view>
	<fixed-button @touch="submit">{{isPerfected?'修改':'提交'}}</fixed-button>
</template>


<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { nextTick, reactive, ref, onMounted } from 'vue';
	import request from '@/utils/common/request/index';
	import { sleep } from '@/utils/common/index';
	import { useUserStore } from '@/store/modules/useUserStore';

	onLoad((option) => {

	});

	const userStore = useUserStore();
	const isPerfected = ref(false);

	const setForm = () => {
		if (!userStore.value) {
			setTimeout(() => {
				setForm();
			}, 100)
		} else {
			const userInfo = userStore.value;
			if (userInfo.is_perfect_info === 1) {
				isPerfected.value = true;
				model.name = userInfo.name;
				model.tel = userInfo.tel;
			}
		}

	}

	const form = ref(null);
	const model = reactive({
		name: '',
		tel: '',
	});
	const rules = {
		name: [{
				required: true,
				message: '请输入您的姓名',
				trigger: ['blur', 'change'],
			},
			{
				validator: (rule, value, callback) => {
					return value.trim() !== '';
				},
				message: '姓名格式错误',
			},
		],
		tel: [{
				required: true,
				message: '请输入电话号码',
				trigger: ['blur', 'change'],
			},
			{
				validator: (rule, value, callback) => {
					return uni.$u.test.mobile(value);
				},
				message: '电话号码格式错误',
			},
		],
	};

	onMounted(() => {
		setForm();
		form.value.setRules(rules);
	});

	// * 提交
	const submit = () => {
		form.value.validate().then(() => {
			let reqData = {
				name: model.name,
				tel: model.tel,
			};
			request({
				url: '/api/perfect/info',
				method: 'POST',
				loadingTip: '提交中',
				data: reqData
			}).then(() => {
				request({ url: '/api/uinfo', loadingTip: '提交中', }).then(async (res) => {
					const userStore = useUserStore();
					userStore.setData(res);

					uni.showToast({
						title: '提交成功',
						icon: 'success',
						mask: true
					});
					await sleep();
					uni.navigateBack();
				});
			})

		}).catch(err => {})
	}
</script>

<style lang="scss">
	.input_area {
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;

		::v-deep .u-form-item__body__right__message {
			margin-left: 95px !important;
		}
	}
</style>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>